<template>
  <div class="login-container">
    <el-form label-position="left" label-width="0px" class="demo-ruleForm login-page">
      <el-form-item>
        <el-divider content-position="left">
          <p class="login-title">管理员登录</p>
        </el-divider>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入账号" v-model="loginForm.account">
          <template slot="prepend">
            <i class="el-icon-user"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入密码" v-model="loginForm.password" type="password">
          <template slot="prepend">
            <i class="el-icon-lock"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-button type="primary" style="width:100%" @click="login">登录</el-button>
      <div class="login-remember">
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        account: '',
        password: '',
        Ticket: '',
        Randstr: '',
      },
      checked: '',
    }
  },
  created() {
    if (window.TencentCaptcha === undefined) {
      let script = document.createElement('script')
      let head = document.getElementsByTagName('head')[0]
      script.type = 'text/javascript'
      script.charset = 'UTF-8'
      script.src = 'https://ssl.captcha.qq.com/TCaptcha.js'
      head.appendChild(script)
    }
  },
  methods: {
    mainClick() {
      this.$router.replace('/admin')
    },
    async login() {
      // console.log(this.loginForm);
      let captcha = new TencentCaptcha('2047656516', async (rsp) => {
        if (rsp.ret === 0) {
          this.loginForm.Ticket = rsp.ticket;
          this.loginForm.Randstr = rsp.randstr;
          const {data: res} = await this.$http.get(
              "/myapi/login/verify?ticket=" +
              this.loginForm.Ticket +
              "&randstr=" +
              this.loginForm.Randstr
          );
          console.log(res.code)
          if (res.code === 1) {
            let _this = this;
            await axios.post('/myapi/authorize/admin/token', {
              username: this.loginForm.account,
              password: this.loginForm.password
            }).then(function (response) {
              console.log(response);
              if (response.data.accessToken != null) {
                localStorage.setItem('Info', JSON.stringify(response.data))
                _this.$router.replace({path: "/admin"})
              } else {
                _this.$notify.error({
                  title: '错误',
                  message: '登录信息错误',
                  duration: 0,
                })
              }
            })
          }
        }
      })


      captcha.show()
    }
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background:' +
        'linear-gradient(150deg,#023c43,#056f5e,#115473)'
    )
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
}
</script>

<style scoped>
.login-container {
  width: 100%;
  padding-top: 10%;
}

.login-page {
  -webkit-border-radius: 5px;
  border-radius: 35px;
  margin: 0 auto;
  width: 20%;
  padding: 35px 35px 35px;
  background: #eff;
  border: 1px solid #eaefea;
  box-shadow: 0 0 10px #000;
}

.login-title {
  font-size: 20px;
  font-weight: bold;
}

.login-remember {
  width: 20%;
  margin: 10px auto;
}
</style>